<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>HTML Layout</title>
	<link rel="stylesheet" href="css/spa.css" type="text/css" />
	<style type="text/css">
		.spa-shell-head, .spa-shell-head-logo, .span-shell-head-acct, .spa-shell-head-search, .spa-shell-main, .spa-shell-main-nav, .spa-shell-main-content, .spa-shell-foot, .spa-shell-chat, .spa-shell-modal{
			position: absolute;
		}
		.spa-shell-head{
			top:0;
			left:0;
			right:0;
			height: 40px;
		}
		.spa-shell-head-logo{
			top:4px;
			left: 4px;
			height: 32px;
			width: 128px;
			background: orange;
		}
		.spa-shell-head-acct{
			top: 4px;
			right: 0;
			width: 64px;
			height: 32px;
			background: green;
		}
		.spa-shell-head-search{
			top: 4px;
			right: 64px;
			width: 248px;
			height: 32px;
			background: blue;
		}
		.spa-shell-main{
			top:40px;
			left: 0;
			bottom: 40px;
			right: 0;
		}
		.spa-shell-main-content,
		.spa-shell-main-nav{
			top: 0;
			bottom: 0;
		}
		.spa-shell-main-nav{
			width: 250px;
			background: #eee;
		}
		.spa-x-closed .spa-shell-main-nav{
			width: 0;
		}
		.spa-shell-main-content{
			left: 250px;
			right: 0;
			background: #ddd;
		}
		.spa-x-closed .spa-shell-main-content{
			left: 0;
		}
		.spa-shell-foot{
			bottom: 0;
			left: 0;
			right: 0;
			height: 40px;
		}
		.spa-shell-chat{
			bottom:0;
			right: 0;
			width: 300px;
			height: 15px;
			background: red;
			z-index: 1;
		}
		.spa-shell-modal{
			margin-top: -200px;
			margin-left: -200px;
			top: 50%;
			left: 50%;
			width: 400px;
			height: 400px;
			background: #fff;
			border-radius: 3px;
			z-index: 2;
		}
	</style>
</head>
<body>
	<div id="spa">
		<div class="spa-shell-head">
			<div class="spa-shell-head-logo"></div>
			<div class="spa-shell-head-acct"></div>
			<div class="spa-shell-head-search"></div>
		</div>
		<div class="spa-shell-main">
			<div class="spa-shell-main-nav"></div>
			<div class="spa-shell-main-content"></div>
		</div>
		<div class="spa-shell-foot"></div>
		<div class="spa-shell-chat"></div>
		<div class="spa-shell-modal"></div>
	</div>0
</body>
</html>